<!--ngNoForm表示不让angular接管表单 ngForm会阻止Html发送请求，angular应用默认被接管-->
<!--ngForm指向form group-->
<!--ngModel 指向FormControl -->
<!--ngSubmit)="onClick(newGet.value)"向后台请求方法-->
<!--<form #newGet="ngForm" (ngSubmit)="onClick(newGet.value)">
  &lt;!&ndash;ngModelGroup用于ngForm表单的嵌套&ndash;&gt;
  <div ngModelGroup="userInfo">
    <div>用户名：<input type="text" #username="ngModel" ngModel name="username"></div>
    <div>手 机：<input type="text" #phone="ngModel" ngModel name="phone"></div>
  </div>
  <div>密 码：<input type="password" #password="ngModel" ngModel name="password"></div>
  <div>确认密码：<input type="password" #passwords="ngModel" ngModel name="passwords"></div>
  <button type="submit">注册</button>
</form>
<div>
  {{newGet.value | json}}
</div>
<div>
  <p>ngModel 指向FormControl 在被ngForm表单接管的表单用#username="ngModel" ngModel name="username"方式绑定</p>
  <p>相当于在组件中创建username对象</p>
  {{username.value}}
</div>-->
<!--novalidate不启动浏览器默认的表单校验-->
<form #myForm="ngForm" (ngSubmit)="onClick(myForm)" novalidate>
  <div>用户名：<input type="text" ngModel required minlength="6" name="username" (input)="onUsername(myForm)"></div>
  <div [hidden]="uValidator || uUntouched">
    <div [hidden]="!myForm.form.hasError('required','username')">
      用户名不能为空
    </div>
    <div [hidden]="!myForm.form.hasError('minlength','username')">
      用户名不能少于六个字
    </div>
  </div>
  <div>手 机：<input type="text" ngModel phone name="phone"></div>
  <div [hidden]="!myForm.form.hasError('phone','phone')">
    手机格式不正确
  </div>
  <div ngModelGroup="passwordGroups" equal>
    <div>密 码：<input type="password" ngModel minlength="6" name="password"></div>
    <div [hidden]="!myForm.form.hasError('minlength',['passwordGroups','password'])">
      密码不能少于六个字
    </div>
    <div>确认密码：<input type="password" ngModel name="pconfrim"></div>
    <div [hidden]="!myForm.form.hasError('equal','passwordGroups')">
      密码不一致
    </div>
  </div>
  <button type="submit">注册</button>
</form>
